<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Answer The Question</title>
		<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/frontend/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/frontend/css/demo.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
		<script src="<?php echo base_url(); ?>public/frontend/js/jquery.countdown360.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
    
    <div class="container"><hr />
    	<div class="row">
        	<div class="col-sm-5">
            	<div class="row">
                <div class="col-sm-5">
                    <img class="img-circle pull-right" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50" alt="User Pic">
                </div>
                <div class="col-sm-5">
                    <strong><?php echo $user_info["fname"]." ".$user_info["lname"] ?></strong><br>
                    <span class="text-muted">User level: Administrator</span>
                </div>
        </div>
            </div>
            <div class="col-sm-2"><div id="countdown" class="clock-canvas"></div></div>
            <div class="col-sm-5">
            <div class="row">
            <div class="col-sm-5" style="text-align:right;">
                    <strong><?php echo $opponent_info->user_fname." ".$opponent_info->user_lname; ?></strong><br>
                    <span class="text-muted" id="status">Preparing...</span>
                </div>
                <div class="col-sm-5">
                    <img class="img-circle pull-left" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50" alt="User Pic">
                </div>
               
        </div>
            </div>
        </div>
    </div>
	<div class="container">
    <div class="clock row">
        <div class="col-sm-12" style="text-align:center;">
					<h2>សំនួរ ១/១០</h2>
                    <p style="font-size:20px;">តើរាជធានីភ្នំពេញស្ថិតក្នុងខេត្តណា?</p>
        </div>
    </div>
    <div class="row">
        	<div style="max-width: 400px; margin: 0 auto 10px;">
              <button type="button" class="btn btn-large btn-block btn-primary">ភ្នំពេញ</button>
              <button type="button" class="btn btn-large btn-block btn-primary">កណ្ដាល</button>
              <button type="button" class="btn btn-large btn-block btn-primary">តាកែវ</button>
            </div>
    </div>
</div>

		
	</body>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(e) {
        $.post("<?php echo base_url(); ?>home/setReady");
    });
	var ready = false;
	setInterval(function(){
		$.post("<?php echo base_url(); ?>home/putUser");
		}, 3000);
	setInterval(function(){
		 // Sends request to update.php
		if(!ready){
		$.ajax({
				type: 'POST',
				url:"<?php echo base_url(); ?>home/isReady",
				data: "type='search'",
				dataType: "json",
				success: function(result){
					if(result['isReady'] == 1){
						$("#status").html("Ready");
						ready = true;
						$("#countdown").countdown360({
						 radius      : 78,
						 seconds     : 10,
						 fontColor   : '#FFFFFF',
						 fillStyle: "black",
						 strokeStyle: "red",
						 strokeWidth: 5,
						 autostart   : false,
						 onComplete  : function () { console.log('done') }
						}).start();
					}
				}
		});
		}
		}, 1000);
</script>
</html>
